﻿<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Basic Usage</title>
    <script src="https://unpkg.com/vue@3.2.4"></script>
    <script src="../../dist/vue-tree.umd.js"></script>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="../../dist/vue-tree.css">
  </head>
  <body>
    <div class="container">
      <h1>Basic Treeview Demo</h1>
      <div id="app">
        <tree id="customtree" :initial-model="model" :model-defaults="modelDefaults" ref="tree"></tree>
        <section id="checkedStuff">
          <button type="button" @click="refreshCheckedList">What's been checked?</button>
          <ul id="checkedList">
            <li v-for="checkedNode in checkedNodes">{{ checkedNode.id }}</li>
          </ul>
        </section>
      </div>
    </div>

    <script type='module'>
    import basicData from './basic.js';

    Vue.createApp({
      components: {
        tree: window['vue-tree']
      },
      data() {
        return {
          model: basicData,
          modelDefaults: {
            addChildTitle: 'Add a new child node',
            deleteTitle: 'Delete this node',
            expanderTitle: 'Expand this node'
          },
          checkedNodes: []
        };
      },
      methods: {
        refreshCheckedList() {
          this.checkedNodes = this.$refs.tree.getCheckedCheckboxes();
        }
      }
    }).mount('#app')
    </script>
  </body>
</html>